<template>
  <view>
    <!-- 搜索框开始 -->
    <view class="search-box">
      <!-- 使用 uni-ui 提供的搜索组件 -->
      <uni-search-bar @input="input" :radius="100" @cancel="compound"></uni-search-bar>
    </view>
    <!-- 搜索框结束 -->

    <!-- 动态图片开始 -->
    <view class="contetn">
      <myPicture @isId="isId"></myPicture>
    </view>
    <!-- 动态图片结束 -->

    <!-- 点击回到顶部 -->
    <backTop :src="backTop.src" :scrollTop="backTop.scrollTop"></backTop>

    <!-- 私有表情 -->
    <view class="personage" @click="popup">私有表情</view>

    <!-- 弹窗遮罩层 -->
    <view class="pop" v-show="show">
      <!-- 制作表情 -->
      <view class="make">
        <view class="cancel" @click="conceal">
          <uni-icons color="#fff" type="closeempty" size="12"></uni-icons>
        </view>
        <view class="make-content">
          <!-- 要制作的图片 -->
          <view class="make-image">
            <uni-icons color="#888" type="camera" size="34"></uni-icons>
          </view>
          <!-- 立即制作按钮 -->
          <view class="make-btn">
            立即制作
          </view>
          <!-- 提示文字 -->
          <view class="make-text">
            用户手动上传图片,表情制作完成后,系统将自动删除图片
          </view>
        </view>
      </view>
    </view>
    <!--  弹窗遮罩层 -->
  </view>
</template>

<script>
  import myPicture from '../../components/my-picture/my-picture.vue'
  import backTop from '../../components/back-top/back-top.vue'
  export default {
    components: {
      backTop,
      myPicture
    },
    data() {
      return {
        show: false,
        backTop: {
          src: '../../static/back-top/top.png',
          scrollTop: 0
        },
        scrollTop: 0,
        // 延时器的 timerId 防抖
        timer: null,
        // 搜索关键词
        kw: ''
      }
    },
    // 下刷加载监听
    onPageScroll(e) {
      this.backTop.scrollTop = e.scrollTop;
    },
    methods: {
      // 显示制作表情弹窗
      popup() {
        console.log(1111)
        this.show = true
      },
      // 隐藏制作表情弹窗
      conceal() {
        console.log(22222)
        this.show = false
      },
      // 搜索框输入
      input(e) {
        // 清除timer延时器,让用户输入完毕后发送给服务器
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.kw = e.value
          console.log(this.kw)
        }, 500)
      },
      // 点击合成
      compound(e) {
        console.log(e)
      },
      isId(e) {
        console.log(e)
        console.log(e, 2222)
      }
    }
  }
</script>

<style lang="scss">
  // 头部搜索框吸顶
  .search-box {
    position: sticky;
    top: 0;
    z-index: 999;
  }

  // 动态图片左右间距
  .contetn {
    padding: 0 30rpx;
  }

  // 右下角私有表情
  .personage {
    width: 160rpx;
    height: 80rpx;
    background-color: #fcbe17;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 50rpx;
    border-bottom-left-radius: 50rpx;
    font-weight: 700;
    position: fixed;
    bottom: 20%;
    right: 0;
  }


  .pop{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 5000;
    // 制作表情弹窗
    .make {
      width: 480rpx;
      height: 480rpx;
      background-color: #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 16rpx;
    
      .cancel {
        width: 30rpx;
        height: 30rpx;
        background-color: #000;
        font-size: 22rpx;
        text-align: center;
        line-height: 30rpx;
        border-radius: 6rpx;
        margin-left: 50%;
        transform: translateX(690%);
      }
    
      .make-content {
        padding: 30rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    
        // 要制作的图片
        .make-image {
          width: 210rpx;
          height: 210rpx;
          border: 1px solid #888;
          display: flex;
          align-items: center;
          justify-content: center;
        }
    
        // 立即制作按钮
        .make-btn {
          margin: 20rpx 0;
          width: 180rpx;
          height: 70rpx;
          background-color: #fcbe17;
          text-align: center;
          line-height: 70rpx;
          border-radius: 35rpx;
        }
    
        // 提示文字
        .make-text {
          width: 100%;
          font-size: 24rpx;
          line-height: 40rpx;
    
        }
      }
    }
  }

</style>
